<template>
  <div>
      <div id="mylist">你好</div>
      <h1>{{$store.state.count}}</h1>
      <button @click="turnMy">跳转到个人中心并传参</button>
  </div>
</template>
<script lang="ts">

// defineComponent最重要的是：在TypeScript下，给予了组件 正确的参数类型推断 。
// defineComponent可以给组件的setup方法准确的参数类型定义.
// defineComponent 可以接受显式的自定义 props 接口或从属性验证对象中自动推断

import {defineComponent,nextTick} from 'vue'
import {useRouter,useRoute} from 'vue-router'
interface queryInter{
  pid:string
}
export default defineComponent({
  data(){
    return {}
  },
  created() {
    
  },
  props:["dd"],
  setup(){
    nextTick(()=>{
      var li=document.getElementById("mylist")
      console.log(li)
    })
    // vue-router给composition api提供了 
    //  var router=useRouter()   router来代替this.$router
    // var route=useRoute();  route来代替this.$route
    var router=useRouter();
    var route=useRoute();
    let turnMy=()=>{
         // 动态添加路由
      router.addRoute({
        name:"kk",
        path:"/kk",
        component:()=>import("../views/Cart.vue")
      })
      // 动态的删除路由
      // router.removeRoute()
      router.push({name:"my",query:{pid:"9988"}})
   
      console.log(router)
      // router.go();
      //router.replace();
      // 
    }
    return {
      turnMy
    }
  }
})
</script>
<style lang="less">
  
</style>